﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="/lyoa/style/css.css" rel="stylesheet" type="text/css" />
<title>集团公司本部值班表</title>
<style type="text/css">
/* 页面基本样式 */
body, td, input {
    font-family:Arial;
    font-size:12px;
}

/* 日程表格样式 */
#calTable {
    border-collapse:collapse;
    border:5px solid #C3D9FF;
}

/* 每日单元格样式 */
td.calBox {
    border:1px solid #CCDDEE;
    width:140px;
    height:82px;
    vertical-align:top;
}

/* 每日单元格内日期样式 */
td.calBox div.date {
    background:#E8EEF7;
    font-size:11px;
    padding:2px;
    cursor:pointer;
}

/* 每日单元格内周六周日样式 */
td.sat div.date, td.sun div.date{
    color:red;
}

/* 今日样式 */
td.calBox div.today {
    background:#BBCCDD;
}

/* 周标识样式 */
td.day {
    text-align:center;
    background:#C3D9FF;
    border:1px solid #CCDDEE;
    color:#112ABB;
}

/* 当前显示的年月样式 */
#dateInfo {
    font-weight:bold;
    margin:3px;
}

/* 添加任务div样式 */
#addBox {
    display:none;
    position:absolute;
    width:200px;
    border:1px solid #000;
    height:80px;
    background:#FFFF99;
    padding:10px;
}

/* 添加任务内日期样式 */
#taskDate {
    height:30px;
    font-weight:bold;
    padding:3px;
}

/* 按钮样式 */
.taskBtn {
    margin:10px;
}

/* 编辑任务div样式 */
#editBox {
    display:none;
    position:absolute;
    width:200px;
    border:1px solid #000;
    height:60px;
    background:#99FF99;
    padding:10px;
}

/* 任务样式 */
div.task {
    width:140px;
    overflow:hidden;
    white-space:nowrap;
    background:#8989BA;
    border:1px solid #FFF;
    color:#FFF;
    padding:1 2 1 3;
    cursor:pointer;
}
/* 任务样式 */
div.taskB {
    width:140px;
    overflow:hidden;
    white-space:nowrap;
    background:#FF6600;
    border:1px solid #FFF;
    color:#FFF;
    padding:1 2 1 3;
    cursor:pointer;
}
/* 任务样式 */
div.taskQ {
    width:140px;
    overflow:hidden;
    white-space:nowrap;
    background:#8B5618;
    border:1px solid #FFF;
    color:#FFF;
    padding:1 2 1 3;
    cursor:pointer;
}

/* pann增加的样式表，解决本页宽度问题 */
#caltotal{
width:1000px; border:1px #5F8AB3 solid; clear:both
}
#caltotal h1{
font-size:12px; background:url(file_title.gif) no-repeat; line-height:27px; padding-left:40px; color:#fff;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);    //每月天数
var today = new Today();    //今日对象
var year = today.year;      //当前显示的年份
var month = today.month;    //当前显示的月份

//页面加载完毕后执行fillBox函数
$(function() {
    fillBox();
});

//今日对象
function Today() {
    this.now = new Date();
    this.year = this.now.getFullYear();
    this.month = this.now.getMonth();
    this.day = this.now.getDate();
}

//根据当前年月填充每日单元格
function fillBox() {
    updateDateInfo();                   //更新年月提示
    $("td.calBox").empty();             //清空每日单元格

    var dayCounter = 1;                 //设置天数计数器并初始化为1
    var cal = new Date(year, month, 1); //以当前年月第一天为参数创建日期对象
    var startDay = cal.getDay();        //计算填充开始位置
    //计算填充结束位置
    var endDay = startDay + getDays(cal.getMonth(), cal.getFullYear()) - 1;

    //如果显示的是今日所在月份的日程，设置day变量为今日日期
    var day = -1;
    if (today.year == year && today.month == month) {
        day = today.day;
    }

    //从startDay开始到endDay结束，在每日单元格内填入日期信息
    for (var i=startDay; i<=endDay; i++) {
        if (dayCounter==day) {
            $("#calBox" + i).html("<div class='date today' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
        } else {
            $("#calBox" + i).html("<div class='date' id='" + year + "-" + (month + 1) + "-" + dayCounter + "' onclick='openAddBox(this)'>" + dayCounter + "</div>");
        }
        dayCounter++;
    }
    getTasks();                         //从服务器获取任务信息
}

//从服务器获取任务信息
function getTasks() {
    $.getJSON("calendar.jsp",               //服务器页面地址
        {
            action: "getTasks",             //action参数
            month: year + "-" + (month + 1) //年月参数
        },
        function(json) {                    //回调函数
            //遍历JSON数组，建立任务信息
            $(json).each(function(i){
                buildTask(json[i].builddate, json[i].id, json[i].task, json[i].taskType);
            });
        }
    );
}

//根据日期、任务编号、任务内容在页面上创建任务节点
function buildTask(buildDate, taskId, taskInfo, taskType) {
	if(taskType=='白班'){
    $("#" + buildDate).parent().append("<div id='task" + taskId + "' class='taskB' onclick='editTask(this)'><img src='sun.jpg' height=12px />   " + taskInfo + "</div>");
	}else if(taskType=='全天'){
	$("#" + buildDate).parent().append("<div id='task" + taskId + "' class='taskQ' onclick='editTask(this)'><img src='day.jpg' height=12px />   " + taskInfo + "</div>");
	}else{
	$("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'><img src='moon.jpg' height=12px />   " + taskInfo + "</div>");
	}
}

//判断是否闰年返回每月天数
function getDays(month, year) {
    if (1 == month) {
        if (((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400)) {
            return 29;
        } else {
            return 28;
        }
    } else {
        return daysInMonth[month];
    }
}

//显示上月日程
function prevMonth() {
    if ((month - 1) < 0) {
        month = 11;
        year--;
    } else {
        month--;
    }
    fillBox();              //填充每日单元格
}

//显示下月日程
function nextMonth() {
    if((month + 1) > 11) {
        month = 0;
        year++;
    } else {
        month++;
    }
    fillBox();              //填充每日单元格
}

//显示本月日程
function thisMonth() {
    year = today.year;
    month = today.month;
    fillBox();              //填充每日单元格
}

//更新年月提示
function updateDateInfo() {
    $("#dateInfo").html(year + "年" + (month + 1) + "月");
}

//打开新建任务box
function openAddBox(src) {
    $("#taskDate").html(src.id);                    //设置新建日期
    $("#taskInfo").val("");                         //初始化新建任务内容
    var left = getLeft(src) + 15;                   //设置左边距
    var top = getTop(src) + 15;                     //设置顶边距
    $("#addBox").left(left).top(top).slideDown();   //显示新建任务box
}

//向服务器提交新任务信息
function addTask() {
    var taskInfo = $("#taskInfo").val();                //获取任务信息
    var taskType = $("#taskType").val();                //获取任务信息
    //检查任务信息是否为空
    if ($.trim(taskInfo)=="") {
        alert("请输入任务信息。");
    } else {
        var buildDate = $("#taskDate").html();          //获取任务日期
        $.post("calendar.jsp",                          //服务器页面地址
            {
                action: "addTask",                      //action参数
                taskInfo: taskInfo,                     //任务信息参数
                buildDate: buildDate,                   //任务日期参数
				taskType: taskType                      //任务日期参数
            },
            function(taskId) {                          //回调函数
                buildTask(buildDate, taskId, taskInfo, taskType); //建立任务节点
                closeAddBox();                          //关闭新建任务box
            }
        );
    }
}

//关闭新建任务box
function closeAddBox() {
    $("#addBox").slideUp();
}

//打开编辑任务box
function editTask(src) {
    $("#taskId").val(src.id.substr(4));             //对任务编号隐藏域赋值
    var temp=src.innerHTML;
    var temps=temp.split('>');
    $("#editTaskInfo").val(temps[1]);          		//设置编辑内容
    var left = getLeft(src) + 15;                   //设置左边距
    var top = getTop(src) + 15;                     //设置顶边距
    $("#editBox").left(left).top(top).slideDown();  //显示编辑任务box
}

//删除任务
function delTask() {
    var taskId = $("#taskId").val();                //获取任务编号
    $.post("calendar.jsp",                          //服务器页面地址
        {
            action: "delTask",                      //action参数
            taskId: taskId                          //任务编号参数
        },
        function() {                                //回调函数
            $("#task" + taskId).remove();           //在页面删除任务节点
            closeEditBox();                         //关闭编辑box
        }
    );
}

//关闭编辑box
function closeEditBox() {
    $("#editBox").slideUp();
}

//更新任务信息
function updateTask() {
    var taskId = $("#taskId").val();                //任务编号
    var taskInfo = $("#editTaskInfo").val();        //任务内容
    var taskType = $("#editTaskType").val();        //任务内容
    //检查任务信息是否为空
    if ($.trim(taskInfo)=="") {
        ("请输入任务信息。");
    } else {
        $.post("calendar.jsp",                      //服务器页面地址
            {
                action: "updateTask",               //action参数
                taskId: taskId,                     //年月参数
                taskInfo: taskInfo,                  //任务信息参数
				taskType: taskType                      //任务日期参数
            },
            function() {                            //回调函数
                $("#task" + taskId).html(taskInfo); //更新页面任务内容
                closeEditBox();                     //关闭编辑box
            }
        );
    }
}

//返回对象对页面左边距
function getLeft(src){
    var obj = src;
    var objLeft = obj.offsetLeft;
    while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
        objLeft += obj.offsetParent.offsetLeft;
        obj = obj.offsetParent;
    }
    return objLeft;
}

//返回对象对页面上边距
function getTop(src){
    var obj = src;
    var objTop = obj.offsetTop;
    while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY"){
        objTop += obj.offsetParent.offsetTop;
        obj = obj.offsetParent;
    }
    return objTop;
}
</script>
</head>

<body>
<div id="caltotal">
<h1>集团公司本部值班表</h1>

<!-- 新建任务box -->
<div id="addBox">
    <div id="taskDate"></div>
    姓名：<input type="text" id="taskInfo" size="20"/><br>
    班别：<select id="taskType"><option value="白班">白班</option><option value="夜班">夜班</option><option value="全天">全天</option></select>
    <div class="taskBtn" align="center">
        <input type="button" value="增加" onclick="addTask()">
        <input type="button" value="取消" onclick="closeAddBox()">
    </div>
</div>

<!-- 编辑任务box -->
<div id="editBox">
    <input type="hidden" id="taskId">
    姓名：<input type="text" id="editTaskInfo" size="20" readonly="readonly"/><br>
    <div class="taskBtn" align="center">
    <!-- 
        <input type="button" value="更新任务信息" onclick="updateTask()">
     -->
        <input type="button" value="删除" onclick="delTask()">
        <input type="button" value="取消" onclick="closeEditBox()">
    </div>
</div>

<!-- 日历表格 -->
<table id="calTable">
<tr>
    <td colspan="7">
    		<div style="float:left;overflow:hidden">
        <input type="button" value="上月" onclick="prevMonth()">
        <input type="button" value="本月" onclick="thisMonth()">
        <input type="button" value="下月" onclick="nextMonth()">
      	<span id="dateInfo"></span></div>
        <div style="float:right;overflow:hidden"><img src='sun.jpg' height=12px />&nbsp;白班&nbsp;&nbsp;&nbsp;<img src='moon.jpg' height=12px />&nbsp;&nbsp;夜班&nbsp;&nbsp;&nbsp;<img src='day.jpg' height=12px />&nbsp;&nbsp;全天</div>
    </td>
</tr>
<tr>
    <td class="day">周日</td>
    <td class="day">周一</td>
    <td class="day">周二</td>
    <td class="day">周三</td>
    <td class="day">周四</td>
    <td class="day">周五</td>
    <td class="day">周六</td>
</tr>
<tr>
    <td class="calBox sun" id="calBox0"></td>
    <td class="calBox" id="calBox1"></td>
    <td class="calBox" id="calBox2"></td>
    <td class="calBox" id="calBox3"></td>
    <td class="calBox" id="calBox4"></td>
    <td class="calBox" id="calBox5"></td>
    <td class="calBox sat" id="calBox6"></td>
</tr>
<tr>
    <td class="calBox sun" id="calBox7"></td>
    <td class="calBox" id="calBox8"></td>
    <td class="calBox" id="calBox9"></td>
    <td class="calBox" id="calBox10"></td>
    <td class="calBox" id="calBox11"></td>
    <td class="calBox" id="calBox12"></td>
    <td class="calBox sat" id="calBox13"></td>
</tr>
<tr>
    <td class="calBox sun" id="calBox14"></td>
    <td class="calBox" id="calBox15"></td>
    <td class="calBox" id="calBox16"></td>
    <td class="calBox" id="calBox17"></td>
    <td class="calBox" id="calBox18"></td>
    <td class="calBox" id="calBox19"></td>
    <td class="calBox sat" id="calBox20"></td>
</tr>
<tr>
    <td class="calBox sun" id="calBox21"></td>
    <td class="calBox" id="calBox22"></td>
    <td class="calBox" id="calBox23"></td>
    <td class="calBox" id="calBox24"></td>
    <td class="calBox" id="calBox25"></td>
    <td class="calBox" id="calBox26"></td>
    <td class="calBox sat" id="calBox27"></td>
</tr>
<tr>
    <td class="calBox sun" id="calBox28"></td>
    <td class="calBox" id="calBox29"></td>
    <td class="calBox" id="calBox30"></td>
    <td class="calBox" id="calBox31"></td>
    <td class="calBox" id="calBox32"></td>
    <td class="calBox" id="calBox33"></td>
    <td class="calBox sat" id="calBox34"></td>
</tr>
<tr>
    <td class="calBox sun" id="calBox35"></td>
    <td class="calBox" id="calBox36"></td>
    <td class="calBox" id="calBox37"></td>
    <td class="calBox" id="calBox38"></td>
    <td class="calBox" id="calBox39"></td>
    <td class="calBox" id="calBox40"></td>
    <td class="calBox sat" id="calBox41"></td>
</tr>
</table>
</div>
</body>
</html>